<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>智慧医疗系统 - 注册</title>
    <style>
        .logo {
            text-align: center;
            margin: 20px 0;
        }
        .container {
            width: 500px;
            margin: 20px auto;
            padding: 20px;
            border: 1px solid #ddd;
            border-radius: 5px;
        }
        .form-group {
            margin-bottom: 15px;
        }
        .form-group label {
            display: block;
            margin-bottom: 5px;
        }
        .form-group input, .form-group select, .form-group textarea {
            width: 100%;
            padding: 8px;
            border: 1px solid #ddd;
            border-radius: 4px;
        }
        .btn {
            width: 100%;
            padding: 10px;
            background-color: #333;
            color: white;
            border: none;
            border-radius: 4px;
            cursor: pointer;
        }
        .additional-info {
            display: none;
            margin-top: 20px;
            padding-top: 20px;
            border-top: 1px solid #ddd;
        }
        .login-link {
            text-align: center;
            margin-top: 15px;
        }
        .login-link a {
            color: #333;
            text-decoration: none;
        }
        .login-link a:hover {
            text-decoration: underline;
        }
    </style>
</head>
<body>
    <div id="app">
        <div class="logo">
            <img src="/front_code/assets/out.gif" alt="网站Logo">
        </div>

        <div class="container">
            <form id="registerForm">
                <div class="form-group">
                    <label>账号</label>
                    <input type="text" id="username" v-model="account" @blur="dologinAccountCheck" required>
                    <label :style="{color:tipsColor}">{{checkTips}}</label>
                </div>
                <div class="form-group">
                    <label>密码</label>
                    <input type="password" id="password" v-model="pwd" required>
                </div>
                <div class="form-group">
                    <label>确认密码</label>
                    <input type="password" id="confirmPassword" v-model="confirmPwd" @input="checkPasswordsMatch" required>
                    <label :style="{color:pwdtipsColor}">{{pwdTips}}</label>
                </div>
                <div class="form-group">
                    <label>账户类型</label>
                    <select id="userType" v-model="Type" required onchange="showAdditionalInfo()" @change="showTypeInfo">
                        <option value="">请选择账户类型</option>
                        <option value="patient">患者</option>
                        <option value="doctor">医生</option>
                    </select>
                </div>

                <!-- 患者额外信息 -->
                <div id="patientInfo" class="additional-info">
                    <div class="form-group">
                        <label>姓名</label>
                        <input type="text" v-model="name">
                    </div>
                    <div class="form-group">
                        <label>性别</label>
                        <select v-model="gender">
                            <option value="male">男</option>
                            <option value="female">女</option>
                        </select>
                    </div>
                    <div class="form-group">
                        <label>证件类型</label>
                        <select v-model="document">
                            <option value="id">身份证</option>
                            <option value="passport">护照</option>
                        </select>
                    </div>
                    <div class="form-group">
                        <label>证件号码</label>
                        <input type="text" v-model="number">
                    </div>
                    <div class="form-group">
                        <label>手机号</label>
                        <input type="tel" v-model="tel">
                    </div>
                </div>
                <!-- 医生额外信息 -->
                <div id="doctorInfo" class="additional-info">
                    <div class="form-group">
                        <label>姓名</label>
                        <input type="text" v-model="Doctorname">
                    </div>
                    <div class="form-group">
                        <label>科室</label>
                        <select v-model="dept">
                            <option value="0001">内科</option>
                            <option value="0002">外科</option>
                            <option value="0003">儿科</option>
                            <option value="0004">妇科</option>
                        </select>
                    </div>
                    <div class="form-group">
                        <label>个人简介</label>
                        <textarea v-model="desc" rows="4"></textarea>
                    </div>
                    <div class="form-group">
                        <label>排班时间</label>
                        <input type="text" placeholder="例如：周一至周五 8:00-17:00" v-model="schedule">
                    </div>
                </div>

                <button type="button" @click="doRegistSubmit"  class="btn">注册</button>
            </form>
            <div class="login-link">
                已有账号？<a href="登录界面.html">去登录</a>
            </div>
        </div>
    </div>
    <script src="/front_code/js/vue.js" type="text/javascript"></script>
    <script src="/front_code/js/jquery-3.6.0.min.js"></script>
    <script src="/front_code/js/注册页面.js"></script>
    <script type="text/javascript">
        let vm = new Vue({
            el:"#app",
            data:{
                account:"",     // 账户
                pwd:"",         // 密码
                confirmPwd:"",  // 再次确认密码
                name:"",        // 姓名
                Doctorname:"",  // 医生姓名
                gender:"男",      // 性别
                document:"身份证",    // 证件类型
                number:"",      // 证件号码
                tel:"",         // 电话号
                dept:"",        // 科室
                desc:"",        // 个人简介
                schedule:"",    // 排班表
                pwdTips:"",     // 输入密码提示
                checkTips:"",   // 账户合法提示
                tipsColor:"",   // 账户提示颜色
                pwdtipsColor:"",        // 密码提示颜色
                Type: ""          // 用户选择的账户类型
            },
            methods:{
                dologinAccountCheck() {
                    // 1.获取用户输入的数据
                    //  在账号输入框添加v-model属性值，内容与data中定义的变量保持一致
                    // 2.向后端控制器接口发送请求，将account传递给后端
                    let baseUrl = "http://localhost:8080/";
                    let endpoint;

                    switch (this.Type) {
                        case 'patient':
                            endpoint = "patient/check"; // 患者账户类型的URL后缀
                            break;
                        case 'doctor':
                            endpoint = "doctor/check"; // 医生账户类型的URL后缀
                            break;
                        default:
                            alert('请选择账户类型！');
                            return; // 如果没有选择账户类型，则退出函数
                    }

                    let url = baseUrl + endpoint;
                    let params = { account: this.account };
                    $.get(url, params, (res)=>{
                        console.log(res);
                        this.checkTips = res.msg;
                        this.tipsColor = res.code == 200 ? "green" : "red";
                    },"JSON" )
                },

                showTypeInfo(){
                    // 记录用户类型更改
                    console.log('User type changed to:', this.Type);
                },

                checkPasswordsMatch() {
                    if (this.pwd === this.confirmPwd) {
                        this.pwdTips = '密码匹配';
                        this.pwdtipsColor = 'green';
                    } else {
                        this.pwdTips = '密码不匹配，请重新输入';
                        this.pwdtipsColor = 'red';
                    }
                },

                doRegistSubmit(){
                    // 接受用户输入的所有信息
                    let url,params;
                    if (this.Type === "patient"){   // 如果选择患者注册
                        url = "http://localhost:8080/patient/regist";
                        params = {
                            patientId:this.account,
                            patientPassword:this.pwd,
                            patientName:this.name,
                            patientGender:this.gender,
                            patientDocument:this.document,
                            patientNumber:this.number,
                            patientTel:this.tel
                        };
                    } else if (this.Type === "doctor"){ // 如果选择医生注册
                        console.log('Dept type changed to:', this.dept);
                        url = "http://localhost:8080/doctor/regist";
                        params = {
                            doctorId:this.account,
                            doctorName:this.Doctorname,
                            doctorDept:this.dept,
                            doctorDesc:this.desc,
                            doctorPassword:this.pwd
                        };
                    } else {
                        alert("请选择账户类型！");
                        return;
                    }
                    $.get(url, params, (res)=>{
                        if (res.code == 200) {
                            // 注册成功：跳转到登录界面
                            window.location.href = "登录页面.html";
                        } else {
                            // 注册失败：弹出失败提示信息
                            alert(res.msg);
                        }
                    },"JSON" )
                }
            }
        });
    </script>
</body>
</html>